<template>
  <div class="leftPop" ref="drag" @mousedown="moudedown">
    <div class="top">
      <div class="top_1">
        处置记录
        <!-- 待处理弹窗 -->
        <!-- 图标 -->
        <div class="left_icon" @click="closePopup3_1()">
          <n-icon size="18px" color="#fff">
            <CloseSharp></CloseSharp>
          </n-icon>
        </div>
      </div>
    </div>

    <div class="bottomInfo">
      <div class="bottomInfo_1">
        <!-- 处理结果 -->
        <div class="bottomInfo1_1">
          处理结果:
        </div>
        <div class="bottomInfo2_2">
          已处理
        </div>
      </div>
      <!-- -------------- -->
      <div class="bottomInfo_1">
        <!-- 处理结果 -->
        <div class="bottomInfo1_1">
          处理凭证:
        </div>
        <div class="bottomInfoPic">
          <div class="bottomInfoPic_1"></div>
          <div class="bottomInfoPic_1"></div>
          <!-- 已处理 -->
        </div>
      </div>
      <!-- ----------------- -->
      <div class="bottomInfo_1">
        <!-- 处理结果 -->
        <div class="bottomInfo1_1">
          处理状态:
        </div>
        <div class="bottomInfo2_2">
          已完成
        </div>
      </div>
      <!-- --------------- -->
      <div class="bottomInfo_1">
        <!-- 处理结果 -->
        <div class="bottomInfo1_1">
          处理人员:
        </div>
        <div class="bottomInfo2_2">
          张三
        </div>
      </div>
      <!-- ----------------- -->
      <div class="bottomInfo_1">
        <!-- 处理结果 -->
        <div class="bottomInfo1_1">
          处理时间:
        </div>
        <div class="bottomInfo2_2">
          04.26 12:23
        </div>
      </div>
    </div>

    <!-- 步骤条 -->
    <div class="stepStyle">
      <n-space vertical >
        <n-steps vertical  :status="currentStatus"  size="small">
      <n-step
      description="【上报】通过门禁系统自动上报事件2022年4月29日16:09:06"
      />
      <n-step
      description="【确认】安保经理进行确认并分配任务2022年4月29日16:29:06"
      />
      <n-step description="【处理中】安保员张一池正则处理2022年4月29日16:39:06" />
      <n-step
      description="【上报】安保员张一池完成任务2022年4月29日16:49:06"
      />

    </n-steps>
      </n-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const drag = ref()
import { CloseSharp } from "@vicons/ionicons5";
const currentStatus = ref("process")
const currentRef = ref(1);
const emit = defineEmits(['closePopus3_1'])
const moudedown = (ev: any) => {
  // console.log('ev', ev)
  let e = ev || event;
  let x = e.clientX - drag.value.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
  let y = e.clientY - drag.value.offsetTop; //鼠标点击坐标距离盒子上边缘的距离

  document.onmousemove = function (ev) {
    let e = ev || event;
    drag.value.style.left = ev.clientX - x + 'px';
    drag.value.style.top = ev.clientY - y + 'px';

    let bodyScreenX = ev.screenX
    let bodyClientWidth = document.body.clientWidth

    document.onmouseup = function (ev) {
      if (ev.clientX - x < 0) {
        drag.value.style.left = 0
      } else if (bodyScreenX > bodyClientWidth) {
        drag.value.style.right = 0
        drag.value.style.left = bodyClientWidth - 100 + 'px'
      }
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
}

/**
 * 关闭弹窗
 */
const closePopup3_1 = ()=>{
  emit("closePopus3_1")
}
</script>

<style lang="scss" scoped>
.leftPop {
  position: absolute;
  width: 250px;
  // height: 400px;
  transform: translateX(450px);
  z-index: 17;
  background-image: url("../../assets/border/Group4866.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 10px 5px;

  .top {

    // border: 1px solid red;
    .top_1 {
      // font-size: ;
      color: #fff;
      // border: 1px solid rgb(45, 12, 12);
      font-weight: bold;
      position: relative;

      .left_icon {
        // border: 1px solid red;
        position: absolute;
        right: 0;
        top: 2px;
        height: 20px;
        margin: 0;
        padding: 0;
        cursor: pointer;
      }
    }
  }

  .bottomInfo {
    margin-top: 10px;
    // border: 1px solid red;

    .bottomInfo_1 {
      color: #fff;
      // border: 1px solid red;
      display: flex;
      // margin-bottom: 5px;
      padding: 5px 1px;
      font-size: 13px;

      // justify-content: space-around;
      .bottomInfo1_1 {
        // border: 1px solid red;
        font-family: PingFang SC-Medium, PingFang SC;
        color: #77C5FF;
        margin-right: 5px;
      }
      .bottomInfoPic{
        // border: 1px solid red;
        display: flex;
        .bottomInfoPic_1{
          // border: 1px solid red;
          width: 35px;
          height: 25px;
          margin-right: 10px;
          background-image: url("https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }

    .bottomInfo_1:nth-child(even) {
      background-color: rgba(21, 71, 111, 0.6);
    }
  }
  .stepStyle{
    // width: 100%;
    margin-left: 10px;
    margin-top: 10px;
    // height: 150px;
    // overflow: hidden;
    overflow-y: auto;
  }
}
:deep(.n-steps.n-steps--vertical > .n-step > .n-step-content .n-step-content__description){
  margin-top: -8px;
  font-size: 12px;
  margin-bottom: 15px;
}
</style>